<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>局部组件化练习</title>
	</head>
	<body>
		<div id="app">
			<home></home>
			<dog></dog>
		</div>
		<template id ="dogTem">
			<div>
				<h1>{{name}}</h1>
			</div>
		</template>
		<template id = homeTem>
			<div>
				<h1>{{name}}</h1>
				<dog></dog>
			</div>
		</template>
		
		<script src ="../js/vue.js">	
		</script>
		<script>
			let dog = {
				data(){
					return{
						name:"使徒"
					}
				},
				template:"#dogTem"
			}
			let home = {
				data(){
					return{
						name: "行者"
					}
				},
				template:"#homeTem",
				components:{
					dog
				}
			}
			const app = new Vue({
				el: "#app",
				components:{
					home,
					dog
				}
			})
		</script>
	</body>
</html>
